<template>
  <div class="component-page">
    <h1 class="user-title">币币账户</h1>
    <div class="asset-box">
      <p class="text">币币资产估值</p>
      <p>123 CNY</p>
    </div>
    <div class="asset-page">
      <div class="header">
        <div class="hide-box">
          <input
            type="checkbox"
            id="hidden-checkbox"
            placeholder
            name="hidden-checkbox"
            class="hidden-checkbox"
            v-model="isHide"
            @change="hideClick()"
          />
          <label for="hidden-checkbox"></label>
          <el-tooltip class="item" effect="dark" content="小于100CNY" placement="bottom">
            <span>隐藏小额资产</span>
          </el-tooltip>
        </div>
        <div class="link-box">
          <router-link class="header-link" to="/user/cec-record">财务记录</router-link>

          <router-link class="header-link" to="/user/property/coinadres">提币地址</router-link>
        </div>
      </div>
      <div class="proper-body-box">
        <div class="type-info-box">
          <span class="list-info coin-box">币种</span>
          <span class="list-info useable-box">可用</span>
          <span class="list-info frost-box">冻结</span>
          <span class="list-info ttm-box">估值</span>
          <span class="list-info action-box">操作</span>
        </div>
        <!-- 列表 -->
        <div v-if="dataList&&dataList.length>0">
          <PrpertyList
            v-for="(item,index) in dataList"
            :key="index"
            :item="item"
            :index="index"
            :isOpenIndex="isOpenIndex"
            :hasPaypwd="hasPaypwd"
            @refreshList="refreshList"
            @chardChange="chardChange"
          ></PrpertyList>
        </div>
        <div v-else class="ad-list-box">
          <div class="empty-box">
            <p>当前暂无数据</p>
          </div>
        </div>
      </div>
      <div class="fenye">
        <!-- 分页 -->
        <el-pagination
          background
          class="fenye"
          layout="prev, pager, next"
          :total="pageCount*1==0?1:pageCount"
          :page-size="10"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import PrpertyList from "./property-cec-list";
import { mapState } from "vuex";
export default {
  data() {
    return {
      // 用户的资产
      CecCoin: 0,
      hasPaypwd: "",
      // 初始请求列表数据
      asset: {
        Page: 1,
        PageSize: 10
      },
      total: 0,
      pageCount: 1,
      dataList: [],
      defaultArr: [],
      item: {
        serverAdress: ""
      },
      isOpenIndex: "",
      isHide: false
    };
  },

  methods: {
    successMsg(msg) {
      this.$message({
        showClose: true,
        message: msg,
        type: "success"
      });
    },
    errorMsg(msg) {
      this.$message.error(msg);
    },

    /*
     *请求用户的资产列表
     *Type    int      1.otc交易 2.cec交易
     */
    reqList() {
     
    },
    /*
     *用户中心的加载，判断用户是否拥有支付密码
     *store读取，若无，则请求
     */
    reqUserInfo() {
     
    },

    // 分页点击
    handleSizeChange(val) {
      this.asset.Page = val * 1;
      this.reqList();
    },
    handleCurrentChange(val) {
      this.asset.Page = val * 1;
      this.reqList();
    },
    // 组件传递的数据刷新请求
    refreshList() {
      this.reqList();
    },
    // 子组件的列表点击
    chardChange(val) {
      this.isOpenIndex = val;
    },
    /*
     *前端进行数据的过滤，价值小于100rmb的隐藏不再显示
     */
    hideClick() {
      // 数据进行过滤
      if (this.isHide) {
        this.dataList = this.dataList.filter(function(item) {
          return item.Price >= 100;
        });
      } else {
        this.dataList = this.defaultArr;
      }
    }
  },
  components: {
    PrpertyList
  },
  computed: {
    ...mapState(["userInfo"])
  },
  created() {
    this.reqList();
  },
  mounted() {
    this.reqUserInfo();
  }
};
</script>
<style scoped>
.asset-box {
  width: 214px;
  height: 103px;
  /* background-image: url("../../../../../public/image/account_asset_bgc.png"); */
  background-size: 214px 103px;
  background-color: #e5f7f9;
  margin: 32px 0 19px 19px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  color: #31c0ce;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
}
.asset-box .text {
  font-size: 14px;
}

.asset-page {
  width: 100%;
  margin: 0 auto 0 auto;
  min-height: calc(100vh - 395px);
}
.asset-page .header {
  height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 0 29px;
}
.header-title {
  color: #333333;
  font-size: 24px;
  font-weight: 500;
  line-height: 33px;
}
.link-box {
  display: flex;
}
.header-link {
  width: 110px;
  height: 33px;
  border-radius: 4px;
  border: solid 1px #31c0ce;
  color: #31c0ce;
  text-align: center;
  line-height: 33px;
  font-size: 18px;
  display: block;
}
.header-link:nth-of-type(2) {
  margin-left: 20px;
}
.header-link:hover {
  border: solid 1px #70dae4;
  color: #70dae4;
}
.tool-header {
  display: flex;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  padding: 0 29px;
  color: #333333;
}
.tool-left {
  display: flex;
}
.tool-left .hint {
  font-size: 16px;
  line-height: 22px;
}

.tool-right {
  font-size: 16px;
  line-height: 22px;
}
.hidden-checkbox {
  display: none;
}
.hide-box label {
  background-color: #fff;
  border: 1px solid #e9e9e9;
  padding: 6px;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  vertical-align: text-bottom;
  margin-right: 6px;
  cursor: pointer;
  transition: all 0.3s;
}
.hidden-checkbox {
  position: relative;
}
.hidden-checkbox:checked + label {
  background-color: #70dae4;
  border: 1px solid #70dae4;
  color: #99a1a7;
  cursor: pointer;
}
.hidden-checkbox:checked + label::after {
  content: "\2713";
  font-size: 12px;
  position: absolute;
  top: -2.5px;
  left: 2px;
  color: #fff;
  cursor: pointer;
}
.hide-box {
  color: rgba(0, 0, 0, 0.43);
  font-size: 12px;
  position: relative;
  top: 2px;
}
.hide-box span {
  position: relative;
  top: 1px;
  cursor: pointer;
}
/*  */

.proper-body-box {
  width: 100%;
  background-color: #ffffff;
  transition: all 0.3s;
}
.fenye {
  /* border:solid 1px red; */
  margin-top: 42px;
  margin-bottom: 42px;
  display: flex;
  justify-content: center;
}

li:not(.disabled).active {
  background-color: #31c0ce !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #31c0ce !important;
}
.fenye {
  margin-top: 42px;
  margin-bottom: 42px;
  display: flex;
  justify-content: center;
}
.ad-list-box {
  background-color: #ffffff;
}
.empty-box {
  height: 300px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #cccccc;
}
.type-info-box {
  display: flex;
  padding: 0 29px;
  line-height: 54px;
  border-bottom: solid 1px #f0f2f5;
}
.list-info,
.proper-body-box >>> .lump-box {
  font-size: 12px;
  color: #666666;
}
.coin-box,
.proper-body-box >>> .coin-box {
  width: 16%;
}
.useable-box,
.proper-body-box >>> .useable-box {
  width: 22%;
}
.frost-box,
.proper-body-box >>> .frost-box {
  width:20%;
}
.ttm-box,
.proper-body-box >>> .ttm-box {
  width: 22%;
}

.action-box,
.proper-body-box >>> .action-box {
  width: 20%;
  text-align: right;
}
</style>
